<template>
	<div>
		<!-- 列表数据的同步更新方法 -->
		<h2>数组列表</h2>
		<ul>
			<li v-for="(item, index) in list" :class="{odd: index % 2}" :key="index">
				第{{index + 1}}种水果：{{item.name}} 价格是 {{item.price}}
			</li>
		</ul>
		<button @click="addItem">add something</button>
		<button @click="changePrice">change first one price</button>
	</div>
</template>

<script>
	/**局部导入vue**/
	import Vue from 'Vue'

	export default {
		data () {
			return {
				list: [
					{
						name: 'apple',
						price: 56
					},
					{
						name: 'banana',
						price: 12
					}
				]
			}
		},
		methods: {
			addItem () {
				this.list.push({
					name: 'somethingnew',
					price: parseInt(Math.random()*100)
				})
			},
			changePrice () {
				Vue.set(this.list, 0, {
					name: this.list[0].name,
					price: parseInt(Math.random()*100)
				})
			}
		}
	}
</script>

<style>
	.odd {
		text-decoration: underline;
		color: #ff0000;
	}
</style>